<template>
  <div class="wrapper">
    <chart height="100%" width="100%" ref="chart"></chart>
  </div>
</template>

<script>
import Chart from "@/components/chart/Chart.vue";
export default {
  components: { Chart },
  props: {},
  data() {
    return {
      category: [
        {
          name: "血糖偏高",
          value: 2500,
        },
        {
          name: "血糖偏低",
          value: 8000,
        },
        {
          name: "血压偏高",
          value: 3000,
        },
        {
          name: "血压偏低",
          value: 3000,
        },
        {
          name: "当日新增",
          value: 3000,
        },
      ],
      animationEasing:"elasticOut"
    };
  },
  created() {},
  mounted() {
    this.$refs.chart.showLoading();
    let opotions = {
      //   backgroundColor: "#333",
      xAxis: {
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
        },
        axisLabel: {
          show: true,
        },
        axisTick: {
          show: false,
        },
      },
      grid: {
        left: 80,
        top: 20, // 设置条形图的边距
        right: 80,
        bottom: 20,
      },
      yAxis: [
        {
          type: "category",
          inverse: false,
        //   data: this.category,
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
        },
      ],
      series: [
        {
          // 内
          type: "bar",
          barWidth: 18,
          legendHoverLink: false,
          silent: true,
          itemStyle: {
            normal: {
              barBorderRadius: [5, 5, 5, 5],
              color: function (params) {
                var color;
                color = {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#66b1ff", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#409eff", // 100% 处的颜色
                    },
                  ],
                };

                return color;
              },
            },
          },
          label: {
            normal: {
              show: true,
              position: "left",
              formatter: "{b}",
              textStyle: {
                color: "red",
                fontSize: 14,
              },
            },
          },
          data: this.category,
          z: 1,
        //   animationEasing: "elasticOut",
          animationEasing: this.animationEasing,
        },
        {
          // 分隔
          type: "pictorialBar",
          itemStyle: {
            normal: {
              color: "#fff",
            },
          },
          symbolRepeat: "true",
          symbolMargin: 10,
          symbol: "rect",
          symbolClip: true,
          symbolSize: [2, 21],
          symbolPosition: "start",
          symbolOffset: [1, -1],
          data: this.category,
          z: 2,
        //   animationEasing: "elasticOut",
          animationEasing: this.animationEasing,
        },
        {
          // 外边框
          type: "pictorialBar",
          symbol: "rect",
          itemStyle: {
            normal: {
              color: "none",
            },
          },
          label: {
            normal: {
              formatter: "{c}",
              textStyle: {
                color: "red",
                fontSize: 14,
              },
              position: "right",
              show: true,
            },
          },
          data: this.category,
          z: 0,
        //   animationEasing: "elasticOut",
          animationEasing: this.animationEasing,
        },
      ],
    };
    console.log("opotions.series", opotions.series);
    this.$refs.chart.initChart(opotions);
    this.$refs.chart.hideLoading();
  },
  activated() {},
  updated() {},
  methods: {},
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.wrapper {
  width: 800px;
  height: 500px;
  border: 1px solid red;
  margin: 20px auto;
}
</style>
